<template>
    <div>
        <el-breadcrumb separator="/" class="registration-list">
		  	<el-breadcrumb-item id='hello' :to="{ path: '/' }">活动列表</el-breadcrumb-item>
		  	<el-breadcrumb-item>活动信息</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="main-title">
		 	<div>基本信息</div>
		</div>
		<el-form label-width="120px" class="demo-ruleForm">
  			<el-form-item label="建筑物/商铺名称:" :inline="true" prop="building">
      			<el-input class='building-shop' disabled :value="ruleForm.buildName">
				</el-input>
				<el-input class='building-shop' disabled :value="ruleForm.shopName">
				</el-input>
		  	</el-form-item>
		  	<el-form-item label="活动名称:">
		    	<el-input :value="ruleForm.name" style='width:300px;' disabled>
		    	</el-input>
		  	</el-form-item>
		  	<el-form-item label="报名时间:">
			    <el-input :value="ruleForm.dateRange1" style='width:300px;' disabled>
			    </el-input>
			    <el-input :value="ruleForm.dateRange2" style='width:300px;' disabled>
			    </el-input>
		  	</el-form-item>
		  	<el-form-item label="活动日期:">
		    	<el-input :value="ruleForm.date1" style='width:300px;' disabled>
		    	</el-input>
		    	<el-input :value="ruleForm.date2" style='width:300px;' disabled>
		    	</el-input>
		  	</el-form-item>
		  	<el-form-item label="活动时间:">
		    	<el-input :value="ruleForm.time1" style='width:300px;' disabled>
		    	</el-input>
		    	<el-input :value="ruleForm.time2" style='width:300px;' disabled>
		    	</el-input>
		  	</el-form-item>
		  	<el-form-item label="分类名称:">
		    	<el-input :value="ruleForm.choice" style='width:300px;' disabled>
		    		
		    	</el-input>
		  	</el-form-item>
		   	<el-form-item label="活动地址:">
			    <el-input class='info-input' type="textarea" disabled :value="ruleForm.desc">
			    	
			    </el-input>
			</el-form-item>
			<el-form-item label="已选标签:">
			    <el-tag class='tag-name'
			      :key="tag.index"
			      v-for="tag in tagCheckedName">
			      {{tag.tagname}}
			    </el-tag>
			</el-form-item>
			<el-form-item label='活动模块'>
				<div v-for='item in ruleForm.module_list' :key='item.id'>
					<span style='padding-right:10px;color:#999;padding-bottom:10px;'>显示名称:</span>
					<el-input 
					style='width:200px;' 
					disabled 
					:value="item.modelname" 
					placeholder="模块名称">
						
					</el-input>
					<quill-editor 
					style='margin-top:15px'  
					:content="item.connect"
					disabled
	                ref="myQuillEditor"
	                class="editer">
      				</quill-editor>
				</div>
			</el-form-item>
			<el-form-item label="活动海报:">
			    <div v-for='item in ruleForm.post_list' :key='item.id'>
			    	<div class="post-list">
			    		<div v-show='item.posterimg'><img width="200" height="150" :src="item.posterimg"></div>
			    		<div v-show='!item.posterimg'>没有上传海报图</div>
			    		<div>banner跳转链接:
			    			<input 
			    			type="text"  
			    			placeholder="http://" 
			    			class='banner-link' 
			    			:value='item.path' 
			    			disabled>
			    		</div>
			    	</div>
			    </div>
			</el-form-item>
			<el-form-item label="主办方信息:">
				<div v-show='!ruleForm.sponsorStatus'>关</div>
				<div v-show='ruleForm.sponsorStatus'>
			    	<span>手机号：</span>
			    	<el-input 
			    	:value="ruleForm.phone" 
			    	style='width:300px;' 
			    	disabled>
			    		
			    	</el-input>
			    	<span>邮箱：</span>
			    	<el-input 
			    	:value="ruleForm.email" 
			    	style='width:300px;' 
			    	disabled>
			    		
			    	</el-input>
			    </div>
			</el-form-item>
			<el-form-item label="主办方LOGO:" v-show='ruleForm.sponsorStatus'>
		    	<div style='margin:5px;'>
		    		<div>
		    			<img width="200" height="200" :src="sponsorlogo" v-show='sponsorlogo!=""'>
		    		</div>
		    	</div>
		    	<quill-editor 
		    	style='margin-top:15px' 
		    	:content="ruleForm.sponsorinfo"
	    	 	disabled
            	ref="myQuillEditor"
            	class="editer">
	  			</quill-editor>
	 		</el-form-item>  
			<el-form-item label="分享标题:" style="width:50%" placeholder='请输入标题'>
                <el-input class='form-content' disabled v-model="ruleForm.asharetitle"></el-input>
            </el-form-item>
            <el-form-item label="分享描述:"  style="width:50%">
                <textarea class='form-content form-content-text' disabled v-model="ruleForm.asharedetail"></textarea>
            </el-form-item>
            <el-form-item label='分享图片:'>
				<div style="overflow:hidden">
				    <div v-show='posterimgshare' style='float:left;margin-right:10px;position:relative;'>
                        <img ref='imgList' style='display:inline-block;' width="150" height="150" :src="posterimgshare" alt="">
          		    </div>
					<div v-show='!posterimgshare'>
                        无
          		    </div>	
                </div>
            </el-form-item>
		</el-form>
		<div class="main-title">
			 <div>配置信息</div>
		</div>
		<el-form label-width="120px" class="ruleForm">
			<el-form-item class='activity-type form-item' label="活动类型:">
				{{form.type == 0 ? '普通活动(非会员)':'会员活动'}}
			</el-form-item>
			<el-form-item class='form-item' label="需要报名:">
			    <div>{{form.delivery?'开':'关'}}</div>
			</el-form-item>
			<div v-show='form.delivery'>
				<el-form-item class='info'>
						<div class="person-info">报名人信息（默认表单只要求输入姓名、手机号):</div>
					<el-table
				      :data="tableCheckedOptions"
				      >
				      	<el-table-column
				        prop="name"
				        label="名称"
				        width="180">
					        <template scope="scope">
					        	<span style="text-align:center">{{ scope.row.infoname}}</span>
					        </template>
				      	</el-table-column>
			      		<el-table-column
				        prop="attribute"
				        label="属性"
				        width="180">
					        <template scope="scope">
					        	<span style="text-align:center">{{scope.row.key}}</span>
					        </template>
			      		</el-table-column>
			      		<el-table-column
				        prop="is_must"
				        label="是否必填">
					        <template scope="scope">
					        	<span style="text-align:center">
					        		<el-checkbox disabled v-model="scope.row.mustStatus"></el-checkbox>
					        	</span>
					        </template>
			      		</el-table-column>
			    	</el-table>
			    </el-form-item>
			    <el-form-item class='comment form-item' label="开启评论:">
			    	<span>{{form.comment==0?'关':'开'}}</span>
				</el-form-item>
				<el-form-item class='form-item' label="开启评论审核:">
					<span>{{form.review==0?'关':'开'}}</span>
				</el-form-item>
			    <el-form-item class='comment form-item' label="报名设置-购票券:">
			    	<br/>
			    	<el-form-item class='activity-type form-ticket-type' label="票种类型:">
						{{form.tickettype == 0 ? '票券整个时间段内有效':'票券仅限当天时间段有效'}}
					</el-form-item>
					<el-form-item class='form-ticket-type' label="票种信息:">
			    		<el-form class='ticket-info' v-for='created_item in ticketlist' :key='created_item.id' ref="ruleForm" label-width="100px">
			    		<br/>
							<el-form-item label="是否审核:">
								{{created_item.auditStatus == 1?'需要审核':'不需要审核'}}
		  					</el-form-item>
						  	<el-form-item label="票种名称:">
						    	<el-input disabled :value="created_item.ticketTitle"></el-input>
						  	</el-form-item>
						 	<el-form-item label="费用类型:">
						    	{{created_item.chargeType == 1?'收费':'免费'}}
						  	</el-form-item>
						  	<el-form-item label="票种说明:">
						    	<el-input disabled type="textarea" :value="created_item.remark"></el-input>
						  	</el-form-item>
						  	<el-form-item label="每人最多购买:">
						    	<el-input disabled type="text" :value="created_item.partmax"></el-input>
						  	</el-form-item>
						 	<el-form-item v-if='created_item.chargeType == 1' label="费用:" style='margin:5px'>
							 	<div 
							 	v-if='form.type == 0' 
							 	v-for='(normal_item,index) in created_item.limitlist' 
							 	:key='normal_item.id'>
							 		<span>所有卡级</span>
							      	<span>
							      		<el-input 
							      		disabled 
							      		style='width:200px;margin:5px' 
							      		type="text" 
							      		:value='normal_item.score>=0?normal_item.score:""' 
							      		class='reduce-money'>
							      		</el-input>
							      	</span>
							      	<span>积分</span>	
							      	<span>
							      		<el-input 
							      		disabled 
							      		style='width:200px;margin:5px' 
							      		type="text" 
							      		:value='normal_item.money>=0?normal_item.money:""' 
							      		class='reduce-money'>
							      		</el-input>
							      	</span>
							      	<span>元</span>
							 	</div>
						 		<div v-show='form.type == 1'>
						    		<div>
						    		{{created_item.type==1?'尊享扣减（分卡级扣减积分设置价格）':'统一扣减(不分卡级统一扣减积分或扣费)'}}
						    		</div>
						    		<div v-for='(normal_item,index) in created_item.limitlist' v-show='created_item.type == "0"' :key='normal_item.id' class="normal-reduce">
							      		<span>所有卡级</span>
								      	<span>
								      		<el-input 
								      		disabled 
								      		type="text" 
								      		style='width:250px;margin:5px' 
								      		:value='normal_item.score>=0?normal_item.score:""' 
								      		class='reduce-money'>
								      			
								      		</el-input>
								      	</span>
								      	<span>积分</span>	
								      	<span>
								      		<el-input 
								      		disabled 
								      		type="text" 
								      		style='width:250px;margin:5px' 
								      		:value='normal_item.money>=0?normal_item.money:""' 
								      		class='reduce-money'>
								      			
								      		</el-input>
								      	</span>
								      	<span>元</span>
						      		</div>
						      		<div v-show='created_item.type == 1'>
							      	 	<el-form-item 
							      	 	class='custom-reduce'  
							      	 	v-for='(item1,index) in created_item.limitlist' 
							      	 	:key='item1.id'>
									    	<span>卡类型:</span>
									    	<el-input 
									    	disabled 
									    	style='width:100px;margin:5px' 
									    	:value='item1.cardname'>
									    		
									    	</el-input>
									    	<el-input 
									    	disabled 
									    	style='width:250px;margin:5px' 
									    	:value='item1.score>=0?item1.score:""'>
									    		
									    	</el-input>
									    	<span>积分</span>
									    	<el-input 
									    	style='width:250px;margin:5px' 
									    	disabled 
									    	:value='item1.money>=0?item1.money:""'>
									    		
									    	</el-input>
									    	<span>元</span>
									  	</el-form-item>
								  	</div>
						      	</div>
						  	</el-form-item>
						<el-form-item label='活动日期：'>
					  		<div 
					  		style='margin-bottom:40px' 
					  		v-for='(item,index) in created_item.datelist' 
					  		:key='item.id'>
							  	<div class='date-range'>
					            	<el-input 
					            	:value="item.startDate" 
					            	style='width:250px;margin:5px' 
					            	disabled>
					            		
					            	</el-input>
			    					<el-input 
			    					:value="item.endDate" 
			    					style='width:250px;margin:5px' 
			    					disabled>
			    						
			    					</el-input>
					          	</div>
					          	<div 
					          	class="time-range" 
					          	v-for='(time_item,time_index) in item.timelist' 
					          	:key='time_item.id'>
					          	  	<el-input 
					          	  	:value="time_item.startTime" 
					          	  	style='width:250px;margin:5px' 
					          	  	disabled>
					          	  		
					          	  	</el-input>
			    					<el-input 
			    					:value="time_item.endTime" 
			    					style='width:250px;margin:5px' 
			    					disabled>
			    						
			    					</el-input>
								  	<span>门票数量：</span>
								  	<el-input  
								  	style='width:100px;margin:5px' 
								  	disabled 
								  	:value='time_item.partnum'>	
								  	</el-input>
							   	</div>
						   	</div>
			        	</el-form-item>  
					</el-form>
				</el-form-item>
			</el-form-item>
		</div>
		<div class="btn">
			<el-button type="primary" @click="$router.go(-1)">返回</el-button>
		</div>
	</el-form>
</div>
</template>

<script>
 import { quillEditor } from 'vue-quill-editor'
    export default {
    	data(){
    		return {
    			id:this.$route.params.id,
    			action:[],
    			building:null,
    			poiId:null,
    			tagCheckedName:null,
    			buildId:null,
    			FirstBuilding:null,
    			classifylist:null,
    			classifyId:null,
    			tableCheckedOptions:[],
    			posterimg:[],
    			ticketlist:[],
    			shopList:[],
				sponsorlogo:'',
				posterimgshare:'',
    			ruleForm:{
    				shopList:null,
    				building:null,
    				choice:null,
    				name:null,
    				shopName:null,
					phone:null,
					asharetitle:'',
					asharedetail:'',
    				email:null,
    				dateRange1:null,
    				dateRange2:null,
    				date1:null,
    				date2:null,
    				time1:null,
    				time2:null,
    				desc:null,
    				post_list:null,
    				module_list:null,
    				sponsorinfo:null,
    				sponsorStatus:false,
    			},
    			form:{
    				type:0,
    				comment:false,
    				review:false,
    				delivery:false,

    			}
    		}
		},
		
		components:{
			quillEditor
		},

    	methods:{
    		getShopName(){
		        this.$http.post('marketweb/mappoi/queryPois',{
		          	keyAdmin:this.$store.state.keyAdmin,
		          	buildId:this.buildId
		        }).then(response=>{
		          	if(response.body.code ==200){
		             	this.shopList = response.body.poilist;
		              	for (var i = 0; i < this.shopList.length; i++) {
		                	if(this.shopList[i].id == this.poiId){
		                		this.ruleForm.shopName = this.shopList[i].poiName
		                	}
		                }
		           }else{
		            	this.$message.error(response.body.msg)
		           }
		         
		        },response=>{
		         	this.$message.error("获取店铺数据失败");
		        })
		    },

		    changeModelReverse(){
	            for (var i = 0; i < this.ruleForm.module_list.length; i++) {
	                if(this.ruleForm.module_list[i].connect.indexOf('style=\"text-align: center;\"') >-1 ){
	                    this.ruleForm.module_list[i].connect = this.ruleForm.module_list[i].connect.replace(/style=\"text-align: center;\"/g,'class=\"ql-align-center\"')
	                } 
	                if(this.ruleForm.module_list[i].connect.indexOf('style=\"text-align: right;\"') >-1 ){
	                    this.ruleForm.module_list[i].connect = this.ruleForm.module_list[i].connect.replace(/style=\"text-align: right;\"/g,'class=\"ql-align-right\"')
	                }          
	            }
			},
			
			handleBeforePostShare(file){
                const isJPG = file.type === 'image/jpg';
                const isJPEG = file.type === 'image/jpeg';
                 const isLt2M =  file.size / 1024 / 1024 < 0.1;
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过100k!');
				}
					if (!isJPG && !isJPEG) {
						this.$message.error('仅支持上传JPG格式!');
					}

					return (isJPG || isJPEG)  && isLt2M;
			},

			handleSuccessShare(response){
				this.posterimgshare = response.path;
			},

			 handleCLoseImg(){
				this.posterimgshare = ''
			},
        
    		getActivityData(){
	        	this.$http.post('marketweb/actionback/selectById',{
	                keyAdmin:this.$store.state.keyAdmin,
	                id:this.id
		        }).then(response=>{
		            if (response.body.code == 200) {
		                this.action = response.body.action
		                this.building = response.body.buildList;
		                this.ruleForm.shopList = this.action.poiId;
		                this.poiId = this.ruleForm.shopList
		                this.sponsorlogo = this.action.sponsorlogo
		                this.classifylist = response.body.classifylist;
		                this.ruleForm.building = this.action.buildIdStr
		                for (var i = 0; i < this.building.length; i++) {
		                	if(this.building[i].buildIdStr == this.ruleForm.building){
		                		this.ruleForm.buildName = this.building[i].buildName
		                	}
		                }
		                this.buildId = this.action.buildIdStr;
		                this.FirstBuilding = this.buildId
		                this.classifyId = this.action.classifyId;
		                for (var i = 0; i < this.classifylist.length; i++) {
		                     if(this.classifylist[i].id == this.classifyId){
		                      this.ruleForm.choice = this.classifylist[i].classifyName
		                     }
		                   } 
		                this.poiId = this.action.poiId;
		                this.ruleForm.name = this.action.title;
		                this.ruleForm.phone = this.action.phone;
		                this.ruleForm.email = this.action.email;
		                this.ruleForm.dateRange1 = this.action.enrollStart;
		                this.ruleForm.dateRange2 = this.action.enrollEnd;
		                this.ruleForm.date1 = this.action.startDate;
		                this.ruleForm.date2 = this.action.endDate;
		                this.ruleForm.time1 = this.action.starttime;
		                this.ruleForm.time2 = this.action.endtime;
		                this.ruleForm.desc = this.action.place;
		                this.form.tickettype = this.action.tickettype;
		                this.tagCheckedName = this.action.taglist;
		                this.ruleForm.sponsorStatus = this.action.sponsorStatus == 1 ? true : false,
		                this.ruleForm.sponsorinfo = this.action.sponsorinfo,
						this.ruleForm.module_list = this.action.modellist;
						this.ruleForm.asharetitle = this.action.asharetitle,
                    	this.ruleForm.asharedetail = this.action.asharedetail,
                    	this.posterimgshare = this.action.ashareimg,
		                this.changeModelReverse()
		                this.ruleForm.post_list = this.action.posterlist;
		                this.form.type = this.action.type ? this.action.type : 0;
		                this.form.comment = this.action.commentStatus == 1 ? true : false;
		                this.form.review = this.action.commentAudit == 1 ? true : false;
		                this.form.delivery = this.action.enrollStatus == 1 ? true : false;
		                this.tableCheckedOptions = this.action.infolist.length ? this.action.infolist : this.tableCheckedOptions;
		                this.ticketlist = this.action.ticketlist;
		                this.getShopName()
		                for (var i = 0; i < this.tableCheckedOptions.length; i++) {
			                	if(this.tableCheckedOptions[i].mustStatus == 1){
			                		this.tableCheckedOptions[i].mustStatus = true
			                	}else{
			                		this.tableCheckedOptions[i].mustStatus = false
			                	}
		                	}
		            }else{
		                this.$message.error(response.body.msg)
		            }   
		        },response=>{
		            this.$message.error(response.body.msg)
	            })
    		}
    	},

    	created(){
    		this.getActivityData()
    	}
    }
</script>

<style scoped>
	.registration-list{
		padding-bottom: 15px;
		margin-bottom: 10px;
		font-size: 16px;
		border-bottom:1px solid #569efe;
	}

	.post-list{
		display: flex;
		justify-content: space-between;
		padding-right:20px;
	}
	.tag-name{
		margin:0 5px;
	}

	.form-content-text{
    height: 120px;
}

.form-content{
    width: 360px;
}
.upload-share{
    width: 150px;
    height: 150px;
    text-align: center;
    line-height: 150px;
    font-size: 50px;
    border: 1px dotted #ddd;
}
.close{
    cursor: pointer;
    font-size: 18px;
    background: #f00;
    color: #fff;
    position: absolute;
    right: 6px;
    top: 6px;
    z-index: 10;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
}

	.form-ticket-type{
		margin-left: -120px;

	}

	.main-title{
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    color: #569efe;
  } 
  .ticket-info{
  	margin-left: -30px;
  }
  .building-shop{
  width: 30%;
  display: inline-block;
}
.btn{
	text-align: center;
}
</style>